<template>
  <d2-container>
    <el-form
      style="width: 750px; text-align: left"
      label-width="180px"
      ref="form"
      @submit.native.prevent="onSubmit"
      size="small"
      :model="form"
      :rules="rules"
    >
      <el-form-item label="发布任务手续费：" prop="publish_task_fee">
        <el-input placeholder="请输入内容" v-model="form.publish_task_fee">
          <template slot="append">%</template>
        </el-input>
      </el-form-item>
      <el-form-item label="提现手续费：" prop="withdraw_fee">
        <el-input placeholder="请输入内容" v-model="form.withdraw_fee">
          <template slot="append">%</template>
        </el-input>
      </el-form-item>
      <el-form-item label="最低充值金额：" prop="min_recharge">
        <el-input placeholder="请输入内容" v-model="form.min_recharge">
          <template slot="append">元</template>
        </el-input>
      </el-form-item>
      <el-form-item label="下级返佣：" prop="first_commission">
        <el-input placeholder="请输入内容" v-model="form.first_commission">
          <template slot="append">%</template>
        </el-input>
        <p class="warn-info">下级完成任务返佣=比例*任务金额</p>
      </el-form-item>
      <el-form-item label="下下级返佣：" prop="second_commission">
        <el-input placeholder="请输入内容" v-model="form.second_commission">
          <template slot="append">%</template>
        </el-input>
        <p class="warn-info">下下级完成任务返佣=比例*任务金额</p>
      </el-form-item>
      <el-form-item label="下级首次完成任务：" prop="first_task">
        <el-input placeholder="请输入内容" v-model="form.first_task">
          <template slot="append">元</template>
        </el-input>
      </el-form-item>
      <el-form-item label="下级完成3个任务：" prop="three_task">
        <el-input placeholder="请输入内容" v-model="form.three_task">
          <template slot="append">元</template>
        </el-input>
      </el-form-item>
      <el-form-item label="下级首次提现：" prop="first_withdraw">
        <el-input placeholder="请输入内容" v-model="form.first_withdraw">
          <template slot="append">元</template>
        </el-input>
      </el-form-item>
      <el-form-item label="首页推荐：" prop="first_invite">
        <el-input placeholder="请输入内容" v-model="form.first_invite">
          <template slot="append">元/小时</template>
        </el-input>
      </el-form-item>
      <el-form-item label="首页推荐显示个数：" prop="show_task_num">
        <el-input placeholder="请输入内容" v-model.number="form.show_task_num">
          <template slot="append">个</template>
        </el-input>
      </el-form-item>
      <el-form-item label="刷新：" prop="refresh">
        <el-input placeholder="请输入内容" v-model="form.refresh">
          <template slot="append">元/次</template>
        </el-input>
      </el-form-item>
      <el-form-item label="每日可提现次数：" prop="day_withdraw_times">
        <el-input placeholder="请输入内容" v-model.number="form.day_withdraw_times">
          <template slot="append">次</template>
        </el-input>
      </el-form-item>
      <el-form-item label="可提现金额：">
        <el-tag
          :key="index"
          v-for="(tag, index) in form.withdraw_list"
          closable
          :disable-transitions="false"
          @close="handleClose(tag)"
        >
          {{ tag }}元
        </el-tag>
        <el-input
          class="input-new-tag"
          v-if="inputVisible"
          v-model="inputValue"
          ref="saveTagInput"
          size="small"
          @keyup.enter.native="handleInputConfirm"
          @blur="handleInputConfirm"
        >
          <template slot="append">元</template>
        </el-input>
        <el-button v-else class="button-new-tag" size="small" @click="showInput"
          >+</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit">保存 </el-button>
      </el-form-item>
    </el-form>
  </d2-container>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'
import { edit } from './api'

export default {
  name: 'basic',
  data () {
    return {
      form: {
        refresh: '',
        show_task_num: '',
        first_invite: '',
        first_task: '',
        three_task: '',
        first_withdraw: '',
        first_commission: '',
        second_commission: '',
        publish_task_fee: '',
        withdraw_fee: '',
        min_recharge: '',
        day_withdraw_times: '',
        withdraw_list: ''
      },
      inputVisible: false,
      inputValue: '',
      rules: {
        publish_task_fee: [{ validator: this.compareNumberTwo, trigger: 'blur' }],
        withdraw_fee: [{ validator: this.compareNumberTwo, trigger: 'blur' }],
        min_recharge: [{ validator: this.compareNumberOne, trigger: 'blur' }],
        first_commission: [{ validator: this.compareNumberTwo, trigger: 'blur' }],
        second_commission: [{ validator: this.compareNumberTwo, trigger: 'blur' }],
        first_task: [{ validator: this.compareNumberOne, trigger: 'blur' }],
        three_task: [{ validator: this.compareNumberOne, trigger: 'blur' }],
        first_withdraw: [{ validator: this.compareNumberOne, trigger: 'blur' }],
        first_invite: [{ validator: this.compareNumberOne, trigger: 'blur' }],
        show_task_num: [{ validator: this.compareNumberThree, trigger: 'blur' }],
        refresh: [{ validator: this.compareNumberOne, trigger: 'blur' }],
        day_withdraw_times: [{ validator: this.compareNumberThree, trigger: 'blur' }]
      }
    }
  },
  // async asyncData ({ store, route }) {
  //   return store.dispatch('setting/basic/fetchView')
  // },
  computed: {
    ...mapGetters('setting/basic', ['view'])
  },
  async mounted () {
    await this.fetch()
  },
  methods: {
    ...mapActions('setting/basic', ['fetchView']),
    compareNumberOne ({ field }, value, callback) {
      const re = /^\d+(?=\.{1,2}\d+$|$)/
      if (!re.test(value)) {
        return callback(new Error('请输大于0的整数或两位以内小数'))
      }
      const v = parseFloat(this.form[field])
      if (!v || v < 0 || (v * 100).toString().includes('.')) {
        return callback(new Error('请输大于0的整数或两位以内小数'))
      }
      return callback()
    },
    compareNumberTwo ({ field }, value, callback) {
      const re = /^\d+(?=\.{1,2}\d+$|$)/
      if (!re.test(value)) {
        return callback(new Error('请输入0-100之间的整数或两位以内小数'))
      }
      const v = parseFloat(this.form[field])
      if (!v || v < 0 || v > 100 || (v * 100).toString().includes('.')) {
        return callback(new Error('请输入0-100之间的整数或两位以内小数'))
      }
      return callback()
    },
    compareNumberThree ({ field }, value, callback) {
      if (isNaN(value) || typeof value !== 'number') {
        return callback(new Error('请输大于0的整数'))
      }
      const v = parseFloat(this.form[field])
      if (!v || v < 0 || v.toString().includes('.')) {
        return callback(new Error('请输大于0的整数'))
      }
      return callback()
    },
    handleClose (tag) {
      this.form.withdraw_list.splice(this.form.withdraw_list.indexOf(tag), 1)
    },
    showInput () {
      this.inputVisible = true
      this.$nextTick(_ => {
        this.$refs.saveTagInput.$refs.input.focus()
      })
    },
    handleInputConfirm () {
      const inputValue = this.inputValue
      if (inputValue) {
        if (inputValue < 0) {
          this.$message.warning('请输入大于0的数')
          return
        }
        this.form.withdraw_list.push(inputValue)
      }
      this.inputVisible = false
      this.inputValue = ''
    },
    async fetch () {
      await this.fetchView()
      const {
        publish_task_fee,
        withdraw_fee,
        min_recharge,
        first_commission,
        second_commission,
        first_task,
        three_task,
        first_withdraw,
        first_invite,
        refresh,
        show_task_num,
        day_withdraw_times,
        withdraw_list,
        ...params
      } = this.view
      if (publish_task_fee) {
        params.publish_task_fee = publish_task_fee / 100
      }
      if (withdraw_fee) {
        params.withdraw_fee = withdraw_fee / 100
      }
      if (min_recharge) {
        params.min_recharge = min_recharge / 100
      }
      if (first_commission) {
        params.first_commission = first_commission / 100
      }
      if (second_commission) {
        params.second_commission = second_commission / 100
      }
      if (first_task) {
        params.first_task = first_task / 100
      }
      if (three_task) {
        params.three_task = three_task / 100
      }
      if (first_withdraw) {
        params.first_withdraw = first_withdraw / 100
      }
      if (first_invite) {
        params.first_invite = first_invite / 100
      }
      if (refresh) {
        params.refresh = refresh / 100
      }
      if (show_task_num) {
        params.show_task_num = show_task_num
      }
      if (day_withdraw_times) {
        params.day_withdraw_times = day_withdraw_times / 100
      }
      if (withdraw_list.length) {
        params.withdraw_list = withdraw_list.map(money => {
          return money / 100
        })
      }
      Object.assign(this.form, params)
    },
    async onSubmit () {
      await this.$refs.form.validate()
      const {
        publish_task_fee,
        withdraw_fee,
        min_recharge,
        first_commission,
        second_commission,
        first_task,
        three_task,
        first_withdraw,
        first_invite,
        refresh,
        show_task_num,
        day_withdraw_times,
        withdraw_list
      } = this.form
      const params = {}
      if (publish_task_fee) {
        params.publish_task_fee = publish_task_fee * 100
      }
      if (withdraw_fee) {
        params.withdraw_fee = withdraw_fee * 100
      }
      if (min_recharge) {
        params.min_recharge = min_recharge * 100
      }
      if (first_commission) {
        params.first_commission = first_commission * 100
      }
      if (second_commission) {
        params.second_commission = second_commission * 100
      }
      if (first_task) {
        params.first_task = first_task * 100
      }
      if (three_task) {
        params.three_task = three_task * 100
      }
      if (first_withdraw) {
        params.first_withdraw = first_withdraw * 100
      }
      if (first_invite) {
        params.first_invite = first_invite * 100
      }
      if (refresh) {
        params.refresh = refresh * 100
      }
      if (show_task_num) {
        params.show_task_num = show_task_num
      }
      if (day_withdraw_times) {
        params.day_withdraw_times = day_withdraw_times * 100
      }
      if (withdraw_list.length) {
        params.withdraw_list = withdraw_list.map(money => {
          return money * 100
        })
      }
      const r = Object.entries(params).map(([key, value]) => ({
        key,
        value
      }))
      await edit(r)
      this.$message.success('修改成功')
      await this.fetch()
    }
  }
}
</script>
<style scoped lang="scss">
.warn-info {
  margin: 0;
  font-size: 12px;
  color: red;
}

.el-tag + .el-tag {
  margin-left: 10px;
}

.input-new-tag {
  width: 120px;
  vertical-align: bottom;
}

.button-new-tag {
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}

.el-tag + .button-new-tag {
  margin-left: 10px;
}

.el-tag + .input-new-tag {
  margin-left: 10px;
}
</style>
